

<template>
  <!-- 卡片 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>文章管理</span>
        <el-button class="button" type="primary" style="float: right; margin-top: -5px;" @click="handleAdd">发布文章</el-button>
      </div>
    </template>
    <!-- 表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input style="width: 150px;margin-right: 13px" placeholder="请输入分类名" v-model="categoryName"></el-input>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <ADDorUPDATE :v-model="useDilogoStorex.dialogFormVisible"></ADDorUPDATE>

        <el-table :data="useDilogoStorex.tableData" border style="width: 100%;">
          <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
        <el-table-column prop="categoryAlias" label="文章标题" align="center"></el-table-column>
          <el-table-column prop="categoryName" label="分类" align="center"></el-table-column>
          <el-table-column prop="createUser" label="发表时间" align="center"></el-table-column>
          <el-table-column prop="createTime" label="状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center" v-slot="scope">
              <el-button type="primary">编辑</el-button>
              <el-button type="danger" @click="useDilogoStorex.handleDelete(scope.row.id)">删除</el-button>
          </el-table-column>
        </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :size="pageSize"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>



  </el-card>
</template>

<script lang="ts" setup>
import { ref} from 'vue'
import ADDorUPDATE from '@/views/ComponetDilog/ADDorUPDATE.vue'

import { useDilogoStore } from '@/stores/dilog.ts'
import { type ComponentSize, ElMessage } from 'element-plus'
import { categoryPage } from '@/api/users.ts'


const currentPage4 = ref(4)
const pageSize = ref(3)
const background = ref(false)
const disabled = ref(false)
const pageNum = ref(1)
const categoryName = ref('')
const total = ref(0)


const page = ()=>{
  const params = {
    categoryName: categoryName.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  categoryPage(params).then((res) => {
    if (res.data.code == 200) {
      console.log(res.data)
      total.value = res.data.data.total
    } else {
      ElMessage.error("渲染失败")
    }
  })
}


//当每条页数发生变化
const handleSizeChange = (pageSizex: number) => {
  pageSize.value = pageSizex
  console.log("size"+pageSize.value)
  // page()
  useDilogoStorex.List()
}

const handleCurrentChange = (pages: number) => {
  pageNum.value = pages
  console.log(pageNum.value)
  // page()
  useDilogoStorex.List()
}



const useDilogoStorex = useDilogoStore()
useDilogoStorex.List()

page()
// 筛选表单
// const form = ref({
//   categoryName:'',
//   categoryAlias:'',
//   createUser:'',
//   createTime:'',
//   category: '',
//   status: '',
//   name: ''
// })


const handleAdd = () => {
  useDilogoStorex.dialogFormVisible = true
}


// const List = () => categoryList().then(res=>{
//   if (res.data.code == 200){
//     useDilogoStorex.tableData = res.data.data
//     // console.log(form.value.tableData)
//   }else {
//     ElMessage.error("渲染失败")
//   }
// })
// useDilogoStorex.List()
//
// // 提交表单
// const onSubmit = () => {
//   console.log("111")
//   currentPage.value = 1 // 搜索时重置到第一页
//   paginatedTableDataHandler()
// }
//
//
// // 重置表单
// const resetForm = () => {
//   form.value.category = ''
//   form.value.status = ''
//   form.value.name = ''
//   console.log("11")
//   paginatedTableDataHandler()
// }

</script>

<style scoped>

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: auto;
}


</style>
